<template>
    <div class="common-size">
        <page-head :pageHead="pageHeadData"></page-head>
        <div class="distribute-container">
            <div v-html="item" v-for="(item, index) in textData"></div>
        </div>
        <div class="distribute-chart">
            <template v-for="(item,index) in disChartData">
                <div  v-bind:class="'distribute-chart-text distribute-chart-text-'+ (index +1 ) " >
                    <h2>{{item.value}}</h2>
                    <span>{{item.text}}</span>
                </div>
            </template>

            <div class="distribute-chart-text distribute-chart-text-7">
                <span>{{treatmentStr}}</span>
            </div>
            <div class="distribute-chart-text distribute-chart-text-8">
                <span>{{unTreatmentStr}}</span>
            </div>
        </div>
        <page-footer :pageFooter="pageFooterData"></page-footer>
    </div>
</template>

<script>


    import pageHead from './pageHead.vue'
    import PageFooter from "./pageFooter.vue";
    import {nuxtMixins} from '../assets/javascript/mixin'
    export default {
        name: 'standing_book',
        props:['chartData'],
        mixins: [nuxtMixins],
        data(){
            return {
              pageTitle: '台账情况'
            }
        },
        computed:{
          textData () {
            if(!this.chartData.textData) return
            return this.chartData.textData
          },
          disChartData () {
              console.log('c', this.chartData)
            if(!this.chartData.chartData) return
            return this.chartData.chartData
          },
          oneRemarkData () {
            if(!this.chartData.totalStr) return
            return this.chartData.totalStr
          },
          treatmentStr () {
            if(!this.chartData.treatmentStr) return
            return this.chartData.treatmentStr
          },
          unTreatmentStr () {
            if(!this.chartData.unTreatmentStr) return
            return this.chartData.unTreatmentStr            
          }
        },
        methods: {
            updateDimensions(){
                this.chart.resize();
            }
        },
        mounted: function () {
        },
        components: {
          PageFooter,
          pageHead
        }


    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.distribute-container{
    padding: 0 35px;
    margin: 30px 0 0 0;
    position: relative;
    >h5{
        color: #666;
        font-weight: normal;
        font-size: 14px;
        position: absolute;
        bottom: 0;
    }
}

.distribute-chart{
        width: 100%;
        height: 679px;
        background: url("../assets/images/plateMap.png") 0 50px  no-repeat;
        position: relative;
        margin: 0 0 0 0;
        .distribute-chart-text{
            position: absolute;
            >h2{
                color: #464544;

            }
            >span{
                color: #666;
                font-size: 14px;
            }
            &.distribute-chart-text-1{
                top:62px;
                left: 50%;
                margin-left: -30px;
            }
            &.distribute-chart-text-2{
                top: 217px;
                left: 568px;
            }
            &.distribute-chart-text-3{
                top: 376px;
                left: 568px;
            }
            &.distribute-chart-text-4{
                top:520px;
                left: 50%;
                margin-left: -30px;
            }
            &.distribute-chart-text-5{
                top: 376px;
                right: 568px;
                text-align: right;
            }
            &.distribute-chart-text-6{
                top: 217px;
                right: 568px;
                text-align: right;
            }
            &.distribute-chart-text-7{
                top: 449px;
                right: 2%;
            }
            &.distribute-chart-text-8{
                bottom:50px;
                text-align: center;
                width: 100%;
            }
        }

    }

</style>
